<script setup lang="ts">
// 此文件使用 Vue 3 的 <script setup> 语法糖，能更简洁地编写组件逻辑
import { ref } from 'vue'

// 使用 ref 创建一个响应式变量，用于存储页面标题
const pageTitle = ref('新页面')
</script>

<template>
  <!-- 页面模板部分，展示响应式变量 pageTitle 的值 -->
  <div class="new-page">
    <h1>{{ pageTitle }}</h1>
    <p>这是一个新创建的 Vue 3 页面。</p>
  </div>
</template>

<style scoped>
/* scoped 样式仅作用于当前组件 */
.new-page {
  text-align: center;
  margin-top: 2rem;
}
</style>